<template>
  <div>  <!--支付状态页-->
    <my-dialog :is-show="isShowCheckDialog" 
    @on-close="checkStatus">
      请检查你的支付状态
        <div class="button" @click="checkStatus">
          支付成功
        </div>
        <div class="button" @click="checkStatus">
          支付失败
        </div>
    </my-dialog>

    <my-dialog :is-show="isShowSuccessDialog"  @on-close="offSuccessDialog">
       购买成功      <div class="button" @click="toOrderList">确定</div>
    </my-dialog>

    <my-dialog :is-show="isShowFailDialog" @on-close="offFailDialog">
       购买失败      <div class="button" @click="toOrderList">确定</div>
    </my-dialog>
  </div>
</template>

<script>
import Dialog from '../components/dialog'
export default {
  components:{
    myDialog:Dialog
  },
  props:{
    isShowCheckDialog:{
      type:Boolean,
      default:false
    },
    orderId: {
      type:[String, Number]
    }
  },
  data () {
    return {
      isShowSuccessDialog: false,
      isShowFailDialog: false
     }
  },
  methods: {
    checkStatus(){
        this.$http.post('/api/checkOrder',{orderId: this.orderId})
        .then((res) => {
          this.isShowSuccessDialog=true
          this.$emit('on-close-check-dialog')
        },(err) => {
          this.isShowFailDialog= true
          this.$emit('on-close-check-dialog')
        })
    },
    offSuccessDialog () {
      this.isShowSuccessDialog= false
    },
    offFailDialog () {
      this.isShowFailDialog = false
    },
    toOrderList () {
      this.$router.push({path:'/orderList'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
